<template>
  <vxe-table ref="tableRef" :data="data" border :round="true" maxHeight="300">
    <vxe-column field="order_item_id" title="ID" fixed="left" min-width="80" />
    <vxe-column field="main_img" title="图片" width="76">
      <template #default="{ row }">
        <el-image :src="row.main_img" width="68" style="border: 0.5px solid #f0f0f0; border-radius: 4px">
          <template #error>
            <img src="~@/assets/images/null-img.png" alt="" />
          </template>
        </el-image>
      </template>
    </vxe-column>
    <vxe-column title="SKU 自定义SKU" field="sku" width="150">
      <template #header>
        <div>
          <div>SKU</div>
          <div>自定义SKU</div>
        </div>
      </template>
      <template #default="{ row }">
        <p>{{ row.sku }}</p>
        <p>{{ row.custom_sku }}</p>
      </template>
    </vxe-column>
    <vxe-column title="渠道SKU/ASIN" width="150">
      <template #default="{ row }">
        <p>{{ row.platform_sku || "-" }}</p>
        <p>{{ row.asin || "-" }}</p>
      </template>
    </vxe-column>
    <vxe-column title="产品名称" field="sku_cn_title" width="180">
      <template #default="{ row }">
        <el-tooltip class="box-item" effect="dark" placement="top">
          <template #content>
            <div style="max-width: 300px">{{ row.sku_cn_title }}</div>
          </template>
          <div class="sku-title">{{ row.sku_cn_title }}</div>
        </el-tooltip>
      </template>
    </vxe-column>
    <!-- <vxe-column title="产品销售收入（不含税）" field="original_amount" width="180"></vxe-column> -->
    <vxe-column title="产品销售收入（不含税）" field="original_price" width="180"></vxe-column>
    <vxe-column title="运费收入（不含税）" field="shipping_revenue" width="150"></vxe-column>
    <vxe-column title="数量/已退数量" field="todo" width="120">
      <template #default="{ row }">
        <p>{{ row.quantity || "-" }}/{{ row.refund_quantity || "0" }}</p>
      </template>
    </vxe-column>
    <vxe-column title="退款数量" width="86" fixed="right">
      <template #default="{ row }">
        <el-input-number style="width: 70px" v-model="row.count" :max="row.max" :controls="false" :min="0" :precision="0" :disabled="disabled" @change="countChange(row)"></el-input-number>
      </template>
    </vxe-column>

    <vxe-column title="操作" width="60" fixed="right">
      <template #default="{ row, $index }">
        <el-button type="danger" link v-if="data.length > 1" @click="dtl($index)">删除</el-button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: { type: Array, default: () => [] },
  disabled: { type: Boolean, default: false },
})

const emit = defineEmits(["update:modelValue", "refresh", "updateAmount"])

const tableRef = ref()

const getTableData = () => {
  return tableRef?.value.getTableData()
}
const dtl = (idx) => {
  props.data.splice(idx, 1)
  countAmount()
}
const countChange = (row) => {
  if (row.count > row.quantity) {
    row.count = row.quantity
  }
  countAmount()
}
const countAmount = () => {
  let count = 0
  props.data.forEach((v) => {
    count += v.original_price * v.count
  })
  emit("updateAmount", count)
}

defineExpose({
  getTableData,
})
</script>
<style lang="scss" scoped>
.sku-title {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 3; //行数
  line-clamp: 3;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}
</style>
